<template>
  <el-row>
    <el-col :span="12">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="产品名称">
          <el-input v-model="form.product.name"></el-input>
        </el-form-item>
        <el-form-item label="服务区域">
          <user-address
            :defaultValue="defaultAddress"
            :isDistrict="false"
            ref="AddAddress"
            seletStyle="width:300px"
          />
        </el-form-item>
        <div class="over">
          <el-form-item label="服务次数" style="float:left;width:220px;">
            <el-radio-group v-model="serTime" @change="server">
              <el-radio label="-1">不限</el-radio>
              <el-radio label="0">限制</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="次数" style="float:left;">
            <el-input
              :disabled="isSerTime"
              style="width:100px;"
              v-model="form.productDefineSetting.serverTimes"
            ></el-input>
          </el-form-item>
        </div>
        <div class="over">
          <el-form-item label="等待期" style="float:left;width:220px;">
            <el-radio-group v-model="waitMon" @change="wait">
              <el-radio label="-1">无</el-radio>
              <el-radio label="0">有</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="月数" style="float:left;">
            <el-input
              :disabled="isWait"
              style="width:100px;"
              v-model="form.productDefineSetting.waitMonths"
            ></el-input>
          </el-form-item>
        </div>
        <el-form-item label="确认文案">
          <el-input type="textarea" v-model="form.productDefineSetting.remark"></el-input>
        </el-form-item>
        <el-form-item label="携带文件">
          <div class="avatar-uploader" v-if="!form.sampleFile">
            <div tabindex="0" class="el-upload el-upload--text">
              <label for="upPhoto" class="el-icon-plus avatar-uploader-icon"></label>
              <input
                @change="fileChange"
                type="file"
                name="file"
                class="el-upload__input"
                id="upPhoto"
              >
            </div>
          </div>
          <img
            v-if="form.productDefineSetting.sampleFile"
            :src="form.productDefineSetting.sampleFile"
            class="avatar"
          >
          <span v-if="form.productDefineSetting.sampleFile" class="photoDel" @click="delPhoto">删除</span>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button @click="back">取消</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>
<script>
import UserAddress from "components/address";
import { FileChange } from "utils/formData";
import post from "utils/post";
import put from "utils/put";
import queryList from "utils/queryList";
import upyun from "data/upyun";
export default {
  data() {
    return {
      isEdit: this.$route.query.type === "edit",
      defaultAddress: null,
      serTime: "-1",
      isSerTime: true,
      waitMon: "-1",
      isWait: true,
      upyun,
      fileList: [],
      form: {
        product: {
          name: ""
        },
        productDefineSetting: {
          cityCodes: "",
          serverTimes: "",
          waitMonths: "",
          remark: "",
          sampleFile: ""
        }
      }
    };
  },
  components: {
    UserAddress
  },
  created() {
    if (this.isEdit) this.init();
  },
  methods: {
    init() {
      this.form.id = this.$route.query.id;
      queryList(`product/${this.form.id}`)
        .then(res => {
          this.form = res.data.data;
          if (this.form.productDefineSetting.serverTimes != "-1") {
            this.isSerTime = false;
            this.serTime = "0";
          }
          if (this.form.productDefineSetting.waitMonths != "-1") {
            this.isWait = false;
            this.waitMon = "0";
          }
          let arr = res.data.data.productDefineSetting.cityCodes.split(",");
          this.defaultAddress = { province: arr[0], city: arr[1] };
        })
        .catch(err => {
          this.$message(err.data.message);
        });
    },
    onSubmit() {
      let addressParams = this.$refs.AddAddress.getData();
      if (addressParams.province == "") {
        this.form.productDefineSetting.cityCodes = "-1";
      } else {
        this.form.productDefineSetting.cityCodes =
          addressParams.province + "," + addressParams.city;
      }
      if (this.serTime == "-1") {
        this.form.productDefineSetting.serverTimes = "-1";
      }
      if (this.waitMon == "-1") {
        this.form.productDefineSetting.waitMonths = "-1";
      }
      if (this.isEdit) {
        this.form.product = {
          id: this.form.product.id,
          name: this.form.product.name
        };
        this.api
          .put("/product", this.form)
          .then(res => {
            console.log(res);
            if (res.code == 200) this.$router.push("productManage");
            this.$message("操作成功");
          })
          .catch(err => {
            console.log(err);
            this.$message(err.message);
          });
      } else {
        this.api
          .post("/product", this.form)
          .then(res => {
            if (res.data.code == 200) mes = "操作成功";
            this.$router.push("productManage");
            this.$message(mes);
          })
          .catch(res => {
            console.log(res);
          });
      }
    },
    back() {
      this.$router.back();
    },
    server(val) {
      if (val == "-1") {
        this.form.productDefineSetting.serverTimes = "-1";
        this.isSerTime = true;
      } else {
        this.isSerTime = false;
        this.form.productDefineSetting.serverTimes = "";
      }
    },
    wait(val) {
      if (val == "-1") {
        this.form.productDefineSetting.waitMonths = "-1";
        this.isWait = true;
      } else {
        this.isWait = false;
        this.form.productDefineSetting.waitMonths = "";
      }
    },
    fileChange(e) {
      this.loading = true;
      FileChange(e, res => {
        this.loading = false;
        this.form.productDefineSetting.sampleFile = res.url;
      });
    },
    delPhoto() {
      this.form.productDefineSetting.sampleFile = "";
    },
    upLoadSuccess(response, file, fileList) {
      console.log(response);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    }
  }
};
</script>
<style lang="less" scoped>
.over {
  overflow: hidden;
}
.photoDel {
  margin-left: 20px;
  cursor: pointer;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>